<template>

  <div  class="cart">
    <van-empty v-if="cartList.length === 0" description="啥都没有去买点啥">
      <van-button round type="danger" class="bottom-button" @click="gotoshoping">
      去购物
      </van-button>
    </van-empty>
    <div v-else class="cartList">
            <van-swipe-cell
          v-for="List in cartList"
          :key="List.id"
          >
        <van-card
          :price = Number(List.shop_price).toFixed(2)
          :title= List.shop_name
          class="goods-card"
        >
          <template #desc>
            {{List.cup | FixCup}} {{List.temperature | FixTemperature}}  {{List.sweetness | FixSweetness}}
          </template>
          <template #thumb>
            <img :src="'http://img.zuiyu1818.cn' + List.shop_imgUrl" alt="">
          </template>
          <template #footer>
              <van-stepper @plus="addItem(List.id, List.amount)" @minus="reduceItem(List.id, List.amount)" class="addBtn" theme="round" :v-model="value" :default-value="List.amount" input-width="20px" button-size="20px" />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="deleteCart(List.id)" />
        </template>
      <van-divider />
      </van-swipe-cell>
    </div>
  <div class="cartFooter">
  <div class="footerLeft">应付合计: ￥ {{priceTotal.priceTotal}}</div>
  <div class="footerRight">
    <van-button type="info" size="large" @click="GoToCheckOut">去结算</van-button>
  </div>
</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { SwipeCell, Button, Card, Stepper, Dialog, Notify, Divider, Empty } from 'vant'
import { getCart, deleteShop, putCart } from '@/API/cart'

Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Card)
Vue.use(Stepper)
Vue.use(Dialog)
Vue.use(Notify)
Vue.use(Divider)
Vue.use(Empty)
export default {
  name: 'cart-index',
  data () {
    return {
      value: 0,
      cartList: [],
      priceTotal: []
    }
  },
  methods: {
    GoToCheckOut () {
      if (this.cartList.length) {
        this.$router.push('/order/confirm')
      } else {
        Notify('东西都没买还提交！！What；s your problem ?')
      }
    },
    gotoshoping () {
      this.$router.push('/menu')
    },
    deleteCart (id) {
      Dialog.confirm({
        message: '您确定要删除该商品吗?'
      })
        .then(() => {
          deleteShop(id).then(res => {
            Notify('删除成功')
            getCart().then(res => {
              console.log(res)
              this.cartList = res.body.data
              this.priceTotal = res.body.total
              this.$store.commit('updataNum', res.body.total.numTotal)
            })
          })
        })
        .catch(() => {
        })
    },
    addItem (id, amount) {
      let index = 0
      if (index === 0) {
        amount += 1
        putCart(id, amount).then(res => {
          index = 1
          if (res.meta.code === 200) {
            getCart().then(res => {
              this.cartList = res.body.data
              this.priceTotal = res.body.total
              console.log(res)
              this.$store.commit('updataNum', res.body.total.numTotal)
            })
            index = 0
          }
        })
      }
    },
    reduceItem (id, amount) {
      let index = 0
      if (index === 0) {
        amount -= 1
        putCart(id, amount).then(res => {
          index = 1
          if (res.meta.code === 200) {
            getCart().then(res => {
              this.cartList = res.body.data
              this.priceTotal = res.body.total
              console.log(res)
              this.$store.commit('updataNum', res.body.total.numTotal)
            })
            index = 0
          }
        })
      }
    }
  },
  created () {
    if (getCart()) {
      getCart().then(res => {
        console.log(res)
        this.cartList = res.body.data
        this.priceTotal = res.body.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 .goods-card {
    margin: 0;
    background-color: white
  }

  .delete-button {
    height: 100%;
  }
  .addBtn{
    float: right;
    transform: translateY(-30px);
    margin-right: 20px;
  }
  .cartFooter{
    padding: 0 16px;
    width: 100%;
    height: 40px;
    position: fixed;
    // background-color: blue;
    bottom: 50px;
    .footerLeft{
      float: left;
      background-color: #fff;
      width: 60%;
      height: 100%;
      line-height: 40px;
    }
    .footerRight{
      width: 40%;
      height: 100%;
      float: right;
      .van-button--large{
        width: 90%;
        height: 43px;
      }
    }
  }
  .van-card__thumb img{
    height: 88px;
    width: 88px;
  }
  .van-card__num{
    transform: translateY(-30px);
  }
  .cart{
    overflow-y: hidden;
  }
  .cartList{
    height: 100%;
    // padding-bottom: 90px;
    margin-bottom: 50px;
    overflow: hidden;
  }
</style>
